<template>
  <div class="music-library">
    <!-- 下部容器 -->
    <div class="bottom-container">
      <!-- 左容器 -->
      <div class="left-container">
        <el-row gutter="30" style="width:100%">
          <el-col v-for="(music, index) in  musics" :key="index" :span="6" class="music-item">
            <el-card  class="song-card" style="max-width: 280px">
              <img :src="'http://localhost:8080/images/upload/' + music.cover_image" alt="music Cover" class="music-cover"
                @click="goToPlayer(music)" />
               <h4>{{'曲名  :  '+music.music_name }}</h4>
               <h4>{{'类型  :  '+music.type }}</h4>


                <div class="artist-info">
                  <span>{{ '歌手:  ' + music.artist }}</span> 
                  <el-button 
                    type="text" 
                    icon="el-icon-play" 
                     @click="goToPlayer(music)" 
                    class="play-button" >
                    <el-icon class="custom-icon"><VideoPlay /></el-icon>
                </el-button>
                </div>
       
            
            </el-card>
          </el-col>
        </el-row>
        <br>
        <el-pagination
          :current-page.sync="currentPage"
          :page-size="pageSize"
          :total="totalItems"
          layout="prev, pager, next"
          @current-change="handlePageChange"
        />
      </div>
      
      <!-- 右容器 -->
      <div class="right-container">
        <!-- 搜索卡片 -->
    
  <br>
  <!-- 第一行：歌手搜索框和歌曲搜索框 -->
  <el-row gutter="30" class="button-row">
    <el-col :span="12">
      <el-input 
        v-model="searchmanname" 
        placeholder="输入歌手姓名进行查询" 
        class="search-input" 

      />
    </el-col>
    <br><br><br>
  </el-row>
    <el-row gutter="30" class="button-row">
    <el-col :span="12">
      <el-input 
        v-model="searchname" 
        placeholder="输入歌曲名称进行查询" 
        class="search-input" 
      />
    </el-col>
  </el-row>
  <br>
  <!-- 第三行：歌曲类型选择框 -->
  <el-row gutter="30" class="button-row">
    <el-col :span="12">
      <el-select 
        class="search-input" 
        v-model="searchtype" 
        placeholder="选择歌曲类型" 
        @change="searchMusic"
      >
        <el-option label="所有歌曲类型" value=""></el-option>
        <el-option label="新国风流行" value="新国风流行"></el-option>
        <el-option label="传统音乐" value="传统音乐"></el-option>
        <el-option label="戏曲融合" value="戏曲融合"></el-option>
        <el-option label="主题文化" value="主题文化"></el-option>
        <el-option label="地域特色" value="地域特色"></el-option>
      </el-select>
    </el-col>
  </el-row>
  <br>
  <!-- 第四行：查询按钮 -->
  <el-row gutter="30" class="button-row">
    <el-col :span="12">
      <el-button type="danger" round @click="searchMusic()">查询</el-button>
     
    </el-col>
  </el-row>
  <br>
  <!-- 第五行：返回曲库按钮 -->
  <!-- <el-row gutter="30" class="button-row">
    <el-col :span="12">
      <el-button type="primary" round @click="BackMusic">返回曲库</el-button>
    </el-col>
  </el-row> -->


   
        <!-- Top 10 -->
        
          <div class="top-10">
            <h2>播放量排行榜</h2>
            <!-- <el-button type="primary" round @click="playAll">播放全部</el-button> -->
            <el-list>
              <el-list-item v-for="(song, index) in top10Musics" :key="index" class="top10-item" >
                <div @click="goPlayer(song)">
                
                    {{ index + 1 }}. {{ song.music_name }}
               
                  - {{ song.artist }} - {{ song.duration }}次
                </div>
              </el-list-item>
            </el-list>
          </div>
    
      </div>
    </div>
  </div>
</template>
<script>  

export default {  
  data() {
  return {
    searchname: '',
    searchmanname: '',
    searchtype: '',
    musics: [], // 歌曲数据
    songs: [], // 歌曲排行榜数据
    isSearching: false,
    userId: '',
    currentPage: 1, // 当前页码
    pageSize:  12,// 每页显示的条目数
    totalItems: 0, // 总条目数
 
 
  };
},

  computed: {  

    top10Musics() {  
      return this.songs.slice(0, 10); // 返回前10个音乐对象  
    },  
  },  
  methods: {  


    
    goToPlayer(music){
      console.log(music.music_id)
      sessionStorage.setItem('music_id', music.music_id);
      sessionStorage.setItem('type', music.type);
      this.$router.push({name:'Player'},music)
    
    },
    goPlayer(song){
      console.log(song.music_id)
      sessionStorage.setItem('music_id', song.music_id);
      sessionStorage.setItem('type', song.type);
      this.$router.push({name:'Player'},song)
    
    },
    searchMusic() {
  this.currentPage = 1; // 重置为第一页
 
    this.fetchSongs(); // 如果当前是曲库视图，查询曲库
 
},
      
      
      // 你可以在这里进一步处理查询结果  
    
      handlePageChange(page) {
  console.log("Changing page to:", page); // 调试输出
  this.currentPage = page;

    this.fetchSongs();

},


    
    fetchSongs() {
  let params = `page=${this.currentPage}&size=${this.pageSize}`;
  if (this.searchname) {
    params += `&music_name=${encodeURIComponent(this.searchname)}`;
  }
  if (this.searchmanname) {
    params += `&artist=${encodeURIComponent(this.searchmanname)}`;
  }
  if (this.searchtype && this.searchtype !== "所有歌曲类型") {
    params += `&type=${encodeURIComponent(this.searchtype)}`;
  }
  console.log(`Request URL: http://localhost:8080/music/search?${params}`);

  fetch(`http://localhost:8080/music/search?${params}`)
    .then(response => {
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      return response.json();
    })
    .then(data => {
      console.log("Fetched data:", data);
      this.musics = data.list;
      this.totalItems = data.total;
      this.currentPage = data.pageNum; // 确保这里更新 currentPage
    })
    .catch(error => console.error('Error fetching songs:', error));
},
    fetchSongsTop() {  
      fetch('http://localhost:8080/music/sorted-by-duration') // 获取歌曲信息，按照排行  
      .then(response => {  
        if (!response.ok) {  
          throw new Error('Network response was not ok');  
        }  
        return response.json();  
      })  
      .then(data => {  
        this.songs = data   
      })  
      .catch(error => console.error('Error fetching songs:', error));  
    },  
 
  },  
  created() {  

    this.fetchSongs(); // 组件创建时调用fetchSongs方法，得到歌曲信息  
    this.fetchSongsTop(); // 组件创建时调用fetchSongsTop方法，得到歌曲排行榜信息  
  },
  mounted() {  
    // 组件挂载后执行的操作，获取用户ID
    this.userId = sessionStorage.getItem('user_id') || localStorage.getItem('user_id');
    console.log("User ID:", this.userId); // 输出用户 ID
     
  },  
};  
</script>  
  
  <style scoped>
  

  .song-card {
  transition: background-color 0.3s, box-shadow 0.3s; /* 平滑过渡效果 */
  display: flex; /* 使用 Flexbox 布局 */
  flex-direction: column; /* 垂直排列子元素 */
  align-items: center; /* 水平居中对齐 */
  justify-content: center; /* 垂直居中对齐 */
  text-align: center; /* 确保文本在卡片中居中 */
  padding: 0px; /* 可以根据需要添加内边距 */
  /* 初始状态的样式 */
}

.song-card:hover {
  background-color: #f5f7fa; /* 悬停时的背景颜色 */
  cursor: pointer; /* 悬停时的鼠标指针 */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* 增加阴影效果 */
  transform: translateY(-15px); /* 提升卡片位置，创建浮动效果 */
}
  .search-card {
  text-align: left; /* 确保文本内容左对齐 */
}

.button-row {
  display: flex; /* 使用 Flexbox 布局 */
  align-items: flex-start; /* 将内容对齐到顶部 */
}

.search-input {
  width: 100%; /* 确保输入框宽度充分 */
}
.music-library {
  padding: 20px; /* 主容器内边距 */
  margin-left: 20px;  /* 左边距 */
  margin-right: 20px; /* 右边距 */
}
.el-select__wrapper {
   
    min-height: 50px;
    width: 300px; /* 设置搜索框宽度为300px */
  height: 50px; /* 设置搜索框高度为50px */
}
.container {
  height: 30%;
  display: flex;
  flex-direction: column; /* 垂直布局 */
  align-items: center; /* 垂直居中对齐 */
  margin-bottom: 20px; /* 下边距 */
}



.search-input {
  width: 200px; /* 设置搜索框宽度为300px */
  height: 32px; /* 设置搜索框高度为50px */
  border: 1px solid #050406bf; /* 设置边框颜色 */
  border-radius: 4px; /* 设置边框圆角 */
  padding: 0; /* 设置内边距 */
  font-size: 16px; /* 设置字体大小 */
  transition: border-color 0.3s; /* 设置边框颜色变化的过渡效果 */
}

.search-input:focus {
  border-color: #66b1ff; /* 获取焦点时改变边框颜色 */
  outline: none; /* 去掉默认的轮廓 */
}

.button-row .el-button {
  margin: 5px; /* 按钮之间的间距 */
  padding: 10px 20px; /* 增加按钮的内边距 (上下左右) */
  font-size: 16px; /* 增大按钮的字体大小 */
  background-color: #f9f4e8;
  color: #4b3f33;
}

.bottom-container {  
  display: flex; /* 使用 Flexbox 布局 */  
  height: 70%; /* 下部容器的高度 */  
  margin-top: 0px; /* 增加与上部容器的垂直间距 */  
}  
.left-container {  
  flex: 0 0 75%; /* 左侧容器占75%宽度 */  
  height: 100%; /* 使容器高度充满下部容器 */  
  display: flex; /* 使用flex布局 */  
  flex-wrap: wrap; /* 允许换行，以适应内容 */  
  align-items: flex-start; /* 垂直对齐顶部 */  
  
  padding: 20px; /* 可以添加内边距 */  
  border-right: 3px solid #e0e0e0; /* 可选：添加右边框以区分左右容器 */  
}  

.right-container {  
  padding: 100px; /* TOP10 容器的内边距 */
  text-align: left; /* 确保文本内容左对齐 */
  flex: 0 0 20%; /* 右边容器占25%的宽度 */  
  overflow-y: auto; /* 如果内容超出，允许滚动 */  
} 

.music-list {
  
  display: grid; /* 使用网格布局 */
  grid-template-columns: repeat(4, 1fr); /* 定义4列 */
  gap: 100px; /* 设置网格间距 */
}
.music-item {
  width: calc(25% - 30px); /* 每个音乐项宽度为25%（4个一行），减去30px的边距 */
  margin-bottom: 30px; /* 设置底部间距 */
  box-sizing: border-box; /* 让边框和内边距包含在总宽度内 */
  /* margin-bottom: 20px; 分 music-item 之间的间距 */
  display: flex;
  justify-content: center;
  height: 300px; /* 设置每个小容器的高度 */
  box-sizing: border-box; /* 防止边距影响整体宽度 */
}

.music-cover {
  width: 150px; /* 专辑封面图片宽度 */
  height: 150px; /* 专辑封面图片高度 */
  object-fit: cover; /* 图片自适应容器 */
 
  
}

.music-info {

  text-align: center; /* 音乐信息文本居中 */
  padding: 10px 0; /* 设置上下填充 */
}
</style>
<style>
.top-10 {
  padding: 0px; /* TOP10 容器的内边距 */
  text-align: left; /* 确保文本内容左对齐 */
  
}

.top10-item {
  padding: 15px; /* 每个榜单项的内边距 */
}
.top-10 .el-list-item {
  text-align: left; /* 确保文本内容左对齐 */
  justify-content: flex-start; /* 使列表项内容靠左对齐 */
}

.top-10 .el-list-item div {
  margin-left: 0; /* 移除默认的左边距 */
}
</style>


<style>
.artist-info {
  display: flex; /* 使用 Flexbox 布局 */
  align-items: center; /* 垂直居中对齐 */
}

.play-button {
  margin-left: 10px; /* 播放按钮与歌手名称之间的间距 */
  font-size: 16px; /* 设置图标大小 */
}
</style>
<!-- //设置图标样式 -->
<style scoped>
.custom-icon {
  font-size: 36px; /* 设置图标大小 */
  color: #030f04db; /* 设置图标颜色 */
  transition: color 0.3s; /* 添加过渡效果 */
}

.play-button:hover .custom-icon {
  color: #66bb6a; /* 悬停时改变颜色 */
}
</style>
